import React from 'react'
import { Layout, Dropdown, Menu,Avatar } from 'antd';
import { UserOutlined } from '@ant-design/icons';
// import { useState } from 'react';
import './index.css'
import { withRouter } from 'react-router-dom'
import {connect} from 'react-redux'
import {
    MenuFoldOutlined,
    MenuUnfoldOutlined,
} from '@ant-design/icons';
const { Header } = Layout;

function TopHeader(props) {
    // const [collapsed, setCollapsed] = useState(false);
    const changeCollapesd = () => {
        // setCollapsed(!collapsed);
        // 改变state中的isCollapsed
        props.changeCollapesd()
    }
    // console.log(props);

    const {role:{roleName},username} = JSON.parse( localStorage.getItem("token"))
    // 下拉菜单
    const menu = (
        <Menu>
            <Menu.Item key="1">
                {roleName}
            </Menu.Item>
            <Menu.Item key="2" danger onClick={()=>{
                localStorage.removeItem("token")
                props.history.replace('/login')
            }}>退出</Menu.Item>
        </Menu>
    );
    return (
        <Header
            className="site-layout-background"
            style={{
                padding: '0 16px',
            }}
        >
            {
                props.isCollapsed ? <MenuUnfoldOutlined onClick={changeCollapesd} /> : <MenuFoldOutlined onClick={changeCollapesd} />
            }
            <div style={{ float: "right" }}>
                <span>欢迎<span style={{color:'blue'}}>{username}</span>回来</span>
                <Dropdown overlay={menu}>
                    <Avatar size="large" icon={<UserOutlined />} />
                </Dropdown>
            </div>
        </Header>
    )
}
/*
    connect(
        mapStateToProps,
        mapDispatchToProps
    )(被包装的组件)
*/
const mapStateToProps=({CollAspedReducer:{isCollapsed}})=>{
    // console.log(state);
    return {
        isCollapsed,
    }
}
const mapDispatchToProps={
    changeCollapesd(){
        return {
            type:"change_collapsed",
        }
    }
}
export default connect(mapStateToProps,mapDispatchToProps)(withRouter(TopHeader))